import {Button, Form, Input, message, Modal} from 'antd';
import React, {useRef, useState} from 'react';
const SetVideo = ({isSetVideoModalOpen,setIsSetVideoModalOpen}) => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [img, setImg] = useState('');
    const file = useRef(null)

    const handleOk = () => {
        setIsSetVideoModalOpen(false);
    };
    const handleCancel = () => {
        setIsSetVideoModalOpen(false);
    };
    const onFinish = (values) => {
        console.log('Success:', values);
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    //上传封面handler
    const uploadFile = (e) => {
        const fileData = e.target.files[0];
        const pattern = /^image/;
        if (!pattern.test(fileData.type)) {
            message.error("图片格式不正确")
            return
        }
        const reader = new FileReader()
        reader.readAsDataURL(fileData)
        reader.onload = () => {
            setImg(reader.result)
        }
    }
    return (
            <Modal title="Basic Modal" open={isSetVideoModalOpen} onOk={handleOk} onCancel={handleCancel} okText={'保持'} cancelText={'取消'}>
                <Form
                    name="basic"
                    labelCol={{
                        span: 4,
                    }}
                    wrapperCol={{
                        span: 20,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="封面"
                        name="cover"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <div>
                            {(() => {
                                console.log(img)
                                if (img) {
                                    return <img
                                        src={img}
                                        alt="avatar"
                                        style={{
                                            width: '60px',
                                            marginRight: '20px'
                                        }}/>
                                } else {
                                    return ''
                                }
                            })()
                            }
                            <input ref={file} type="file" style={{display: 'none'}} onChange={(e) => uploadFile(e)}/>
                            <Button type={"primary"} onClick={() => {
                                file.current.click()
                            }
                            }>选择封面</Button>
                        </div>
                    </Form.Item>

                    <Form.Item
                        label="名称"
                        name="title"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="链接"
                        name="link"
                    >
                        <Input/>
                    </Form.Item>
                    <Form.Item
                        label="视频ID"
                        name="title"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="第三方ID"
                        name="pid"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                </Form>
            </Modal>
    );
}
export default SetVideo